<template>
  <div style="margin: 20px">
    <el-table
      border
      :data="PermissionList"
      row-key="id"
      :expand-row-keys="['1']"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="权限值" prop="code"></el-table-column>
      <el-table-column label="跳转全限制"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            @click="addOrupdatepermission(row, '添加')"
            title="添加菜单"
            v-if="$has('btn.Permission.add')"
            :disabled="row.level > 3"
            size="mini"
            icon="el-icon-plus"
          >
          </el-button>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            title="修改菜单"
            :disabled="row.pid == '0'"
            @click="addOrupdatepermission(row, '修改')"
          >
          </el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            title="删除"
            v-if="$has('btn.Permission.remove')"
            :disabled="row.pid == '0'"
            @click="removePermission(row.id)"
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="`${title}菜单`" :visible="dialogFormVisible" top="0px">
      <el-form label-width="100px">
        <el-form-item label="名称">
          <el-input v-model="permissionInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="功能权限值">
          <el-input v-model="permissionInfo.code"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="Cancel">取 消</el-button>
        <el-button type="primary" @click="savePermission">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  GetPermissionApi,
  AddPermissionApi,
  updatePermissionApi,
  deletePermissionApi,
} from "@/api/acl/menu";

import { Message } from "element-ui";
export default {
  name: "Permission",
  mounted() {
    this.GetPermission();
  },
  data() {
    return {
      PermissionList: [],

      dialogFormVisible: false,
      title: "",
      permissionInfo: {
        code: "",
        level: 0,
        name: "",
        pid: "1",
        toCode: "",
        type: 1,
      },
    };
  },
  methods: {
    // 获取菜单
    async GetPermission() {
      const result = await GetPermissionApi();
      // console.log(result.data.children);
      this.PermissionList = result.data.children;
    },

    addOrupdatepermission(row, title) {
      this.title = title;
      if (title === "添加") {
        this.permissionInfo.pid = row.id;
        this.permissionInfo.level = row.level + 1;
        if (this.permissionInfo.level >= 4) {
          this.permissionInfo.type = 2;
        }
      } else {
        this.permissionInfo.name = row.name;
        this.permissionInfo.code = row.code;
        this.permissionInfo.id = row.id;
        this.permissionInfo.pid = row.pid;
        this.permissionInfo.level = row.level;
        this.permissionInfo.type = 1;
      }

      this.dialogFormVisible = true;

      // console.log(row.level);
    },
    // 确定保存
    async savePermission() {
      if (this.title === "添加") {
        // console.log(this.permissionInfo);
        await AddPermissionApi(this.permissionInfo);
      } else {
        await updatePermissionApi(this.permissionInfo);
      }
      Message.success("保存成功");
      this.GetPermission();
      this.dialogFormVisible = false;
      this.permissionInfo.name = "";
      this.permissionInfo.code = "";
    },
    // 取消
    Cancel() {
      this.dialogFormVisible = false;
      this.permissionInfo.name = "";
      this.permissionInfo.code = "";
    },

    // 删除菜单
    removePermission(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await deletePermissionApi(id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.GetPermission();
        })
        .catch((error) => {
          console.log(error);
          if (error == "cancel") {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          }
        });
    },
  },
};
</script>

<style></style>
